<script setup lang="ts">
import { reactive, ref } from 'vue'

const floorMap = {
  'building1': [
    { label: '楼层1', code: 'floor1' },
    { label: '楼层2', code: 'floor2' },
    { label: '楼层3', code: 'floor3' },
  ],
  'building2': [
    { label: '楼层4', code: 'floor4' },
    { label: '楼层5', code: 'floor5' },
    { label: '楼层6', code: 'floor6' },
  ],
  'building3': [
    { label: '楼层7', code: 'floor7' },
    { label: '楼层8', code: 'floor8' },
    { label: '楼层9', code: 'floor9' },
  ],
}
const roomMap = {
  'floor1': [
    { label: '房间1', code: 'room1' },
    { label: '房间2', code: 'room2' },
    { label: '房间3', code: 'room3' },
  ],
  'floor2': [
    { label: '房间4', code: 'room4' },
    { label: '房间5', code: 'room5' },
    { label: '房间6', code: 'room6' },
  ],
  'floor3': [
    { label: '房间7', code: 'room7' },
    { label: '房间8', code: 'room8' },
    { label: '房间9', code: 'room9' },
  ],
  'floor4': [
    { label: '房间10', code: 'room10' },
    { label: '房间11', code: 'room11' },
    { label: '房间12', code: 'room12' },
  ],
  'floor5': [
    { label: '房间13', code: 'room13' },
    { label: '房间14', code: 'room14' },
    { label: '房间15', code: 'room15' },
  ],
  'floor6': [
    { label: '房间16', code: 'room16' },
    { label: '房间17', code: 'room17' },
    { label: '房间18', code: 'room18' },
  ],
  'floor7': [
    { label: '房间19', code: 'room19' },
    { label: '房间20', code: 'room20' },
    { label: '房间21', code: 'room21' },
  ],
  'floor8': [
    { label: '房间22', code: 'room22' },
    { label: '房间23', code: 'room23' },
    { label: '房间24', code: 'room24' },
  ],
  'floor9': [
    { label: '房间25', code: 'room25' },
    { label: '房间26', code: 'room26' },
    { label: '房间27', code: 'room27' },
  ],
}
const buildColumn = ref([
  { label: '楼栋1', code: 'building1' },
  { label: '楼栋2', code: 'building2' },
])
const floorColumn = ref(floorMap['building1'])
const roomColumn = ref(roomMap['floor1'])
const spaceColumns = ref([
  buildColumn.value,
  floorColumn.value,
  roomColumn.value,
])
const isShow = ref(false);
const loading = ref(false);
const currentSpace = ref({ label: '全部空间', code: 'all' });

const spacePickerChangeHandler = (target: any) => {
  console.log('spacePickerChangeHandler: ', target);
  const {
    columnIndex,
    index,
    picker
  } = target;
  if (columnIndex === 0) {
    loading.value = true;
    setTimeout(() => {
      const buildingCode = buildColumn.value[index].code;
      floorColumn.value = floorMap[buildingCode];
      const floorCode = floorColumn.value[0].code;
      roomColumn.value = roomMap[floorCode];

      console.log('--------', index, buildingCode, floorColumn.value, roomColumn.value);
      spaceColumns.value = [
        buildColumn.value,
        floorColumn.value,
        roomColumn.value,
      ]
      loading.value = false;
    }, 1000);
  } else if (columnIndex === 1) {
    loading.value = true;
    setTimeout(() => {
      const floorCode = floorColumn.value[index].code;
      roomColumn.value = roomMap[floorCode];
      spaceColumns.value = [
        buildColumn.value,
        floorColumn.value,
        roomColumn.value,
      ]
      loading.value = false;
    }, 1000)
  }
}

defineProps({
  isMock: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits([
  'cancel',
  'confirm',
  'change',
]);

const pickerConfirmHandler = (target: any) => {
  currentSpace.value = {
    label: `${target.value[0].label}/${target.value[1].label}/${target.value[2].label}`,
    code: `${target.value[0].code}-${target.value[1].code}-${target.value[2].code}`,
  }
  emit('confirm', target)
  isShow.value = false;
}

</script>

<template>
  <up-button @click="isShow = true" type="primary">{{ currentSpace.label }}</up-button>
  <up-picker
    :show="isShow" 
    :columns="spaceColumns" 
    keyName="label"
    confirmColor="#d54448"
    :loading="loading"
    @cancel="isShow = false"
    @confirm="pickerConfirmHandler"
    @change="spacePickerChangeHandler"
  ></up-picker>
</template>
